<!DOCTYPE html>
<html>

<head>
    <style>
        /* 图：1229*100 */

        div {
            width: 56px;
            height: 100px;
            /* border: 1px solid green; */

            background-image: url('./dancer.png');
            background-repeat: no-repeat;

            animation-name: dance;
            animation-timing-function: steps(22);
            animation-duration: 5s;


        }

        @keyframes dance {
            0% {
                background-position: 0px 0px;
            }

            100% {
                background-position: -1229px 0px;
            }
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>